<template>
  <div class="report_data">
    <el-table :data="report.details"  :span-method="objectSpanMethod"
              border
              size="mini"
              :show-summary="reportFilter.type===1||reportFilter.type===2"
              :summary-method="getSummaries"
              align="center"
              :height="height">
      <el-table-column align="center" :label="title">
        <el-table-column v-for="colmun in columns[reportFilter.type]" :sortable="colmun.sortable" align="center"
             :prop="colmun.property"
             :label="colmun.name">
        </el-table-column>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <el-col v-if="reports.length>1">
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page.sync="pageNo"
        @current-change="handlePage"
        :page-count="reports.length">
      </el-pagination>
    </el-col>
  </div>
</template>

<script>
  import axios from 'axios';
  import config from '../../config/config'

  export default {
    name: "ReportList",
    props: {reportFilter: Object},
    data() {
      return {
        columns: {
          "1": [
            {name: '品牌', property: 'brandName'},
            {name: '查询总量', property: 'orderNum',sortable:true},
            {name: '占比', property: 'orderNumProp',sortable:true},
            {name: '查询成功', property: 'successNum',sortable:true},
            {name: '成功率', property: 'successPercent',sortable:true},
            {name: '查无记录', property: 'noRecordNum',sortable:true},
            {name: '查询超时', property: 'overTimeNum',sortable:true},
            {name: '查询中', property: 'inquiryNum',sortable:true},
            {name: '查询失败', property: 'failedNum',sortable:true},
            {name: '平均时长', property: 'avgQueryTime',sortable:true},
            {name: '环比', property: 'ringRatio',sortable:true}
          ],
          "2": [
            {name: '渠道名称', property: 'channelName'},
            {name: '请求次数', property: 'orderNum',sortable:true},
            {name: '占比', property: 'orderNumProp',sortable:true},
            {name: '反馈次数', property: 'backNum',sortable:true},
            {name: '平均时效', property: 'avgSuccessTime',sortable:true},
            {name: '查询成功量', property: 'successNum',sortable:true},
            {name: '成功率', property: 'successPercent',sortable:true},
            {name: '查询失败', property: 'failedNum',sortable:true},
            {name: '查询超时', property: 'overTimeNum',sortable:true},
            {name: '查询中', property: 'inquiryNum',sortable:true},
            {name: '查无记录', property: 'noRecordNum',sortable:true},
          ],
          "3": [
            {name: '接单效率分析', property: 'timeScope'},
            {name: '数量', property: 'count'},
            {name: '占比', property: 'countProp'},
          ],
          "4": [
            {name: '渠道名称', property: 'channelName'},
            {name: '品牌名', property: 'brandName'},
            {name: '查询量', property: 'orderNum'},
            {name: '查询成功', property: 'successNum'},
            {name: '成功率', property: 'successPercent'},
            {name: '查无记录', property: 'noRecordNum'},
            {name: '查询超时', property: 'overTimeNum'},
            {name: '查询失败', property: 'failedNum'},
          ]
        },
        report:{},
        title:'',
        pageNo:1,
        reports: []
      }
    },
    methods: {
      query() {
        axios.post(config.api.report.list, this.reportFilter)
          .then(response => {
            this.pageNo=1;
            this.reports = response.data;
            this.report = this.reports[0]||[];
            this.title=this.report.date;
            this.filledPropertis();
          }).catch(error => console.log(error))
      },
      filledPropertis() {
        let reportType = this.reportFilter.type;
        //品牌分析和渠道统计分析列属性设置
        if (reportType===1||reportType===2){
          let temp = this.columns[reportType];
          //按月和按周添加环比
          if (this.reportFilter.scopeType===2 || this.reportFilter.scopeType===3){
            temp[temp.length - 1].name != '环比' && temp.push({name: '环比', property: 'ringRatio'});
          }else {
            temp[temp.length - 1].name == '环比' && temp.pop();
          }
          let total = this.report.total;
          this.report.details.forEach(detail=>{
            detail.orderNumProp=(detail.orderNum * 100 / total.orderNum).toFixed(2)+ '%';
          })
          total.orderNumProp='-';
        }
        //效率统计分析
        if (reportType===3) {
          this.report.details.forEach(detail=>{
            detail.countProp=(detail.count * 100 / this.report.total.count).toFixed(2)+ '%';
          })
        }
        if (reportType===4){
          this.resetDetails();
        }
      },
      //重新设置details数据
      resetDetails(){
        var details=[];
        let detail = this.report.details;
        for (name in detail) {
          let datas = detail[name];
          datas[0].spanSize=datas.length;
          details=details.concat(datas);
        }
        this.report.details=details;
      },
      getSummaries(param){
        const sums = [];
        if (this.report.total){
          const { columns, data } = param;
          columns.forEach((column, index) => {
            if (index === 0) {
              sums[index] = '合计';
              return;
            }else {
              let propName = column.property;
              if (propName==='percentBrand') {
                sums[index] = '-';
                return;
              }
              if (propName==='percentSuccess') {
                let result = this.report.total.successNum*100.0/this.report.total.orderNum;
                sums[index] =  Number(result).toFixed(2) + '%';
                return;
              }
              sums[index] = this.report.total[column.property];
            }
          });
        }
        return sums;
      },

      handlePage(val) {
        this.report = this.reports[val-1]
        this.title=this.report.date;
        this.filledPropertis()
      },
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (this.reportFilter.type===4){
          if (columnIndex === 0) {
            if (row.hasOwnProperty("spanSize")) {
              return {
                rowspan: row.spanSize,
                colspan: 1
              };
            } else {
              return {
                rowspan: 0,
                colspan: 0
              };
            }
          }
        }
      },
    },
    beforeCreate(){
      this.height = window.innerHeight*0.8;
    },
    mounted() {
      this.query();
    }
  }
</script>

<style scoped>
  .report_data{
    margin: 0 auto ;
    width: 98%;
  }
  .el-pagination{
    margin-top: 10px;
    /*position: fixed;*/
    /*bottom: -5px;*/
    /*right: 10px;*/
  }
</style>
